<template>
  <div>
    <zczy-upload
      v-if="!$route.query.readonly || disabled"
      class="upload-demo"
      :business="$config.ossBusiness"
      :module="$config.ossModule"
      :env="$config.ossEnv"
      :headers="headers"
      :action="actionUrl"
      :limit="10"
      :show-file-list="false"
      :before-upload="beforeUpload"
      :on-success="handleAvatarSuccess"
      :on-error="handleAvatarError"
      :on-exceed="exceedData"
      accept="*"
    >
      <el-button size="small" type="default" icon="el-icon-plus">{{
        $t('点击上传')
      }}</el-button>
    </zczy-upload>
    <div v-for="(item, index) in fileList" :key="index" class="el-upload-file">
      <a @click="clickFile(item)">{{ item.fileName }}</a>
      <i
        class="el-icon-close"
        @click="deleteFile(index)"
        v-if="!$route.query.readonly || disabled"
      ></i>
    </div>
  </div>
</template>
<script>
import nonStandardService from '@/services/nonStandardService'
export default {
  name: 'files',
  props: {
    detail: {
      type: Object,
      default: () => {
        return {}
      },
    },
    value: {},
    disabled: Boolean,
    parameter: {
      type: Object,
      default: () => {
        return {}
      },
    },
  },
  watch: {
    value() {
      if (this.value && typeof this.value === 'string') {
        this.fileList = this.value ? JSON.parse(this.value).value : []
        this.getData();
      }
    },
  },
  data() {
    return {
      actionUrl:
        process.env.VUE_APP_BASE_API +
        '/contract-client-web/system/file/uploadFile',
      headers: {
        ucSsoTokenId: localStorage.getItem('token'),
        ucSystemFlag: 31,
        from: 'saas',
      },
      fileList: [],
    }
  },
  created() {
    if (this.value && typeof this.value === 'string') {
      this.fileList = this.value ? JSON.parse(this.value).value : []
      this.getData();
    }
  },
  methods: {
    beforeUpload(file) {
      const isLimitSize = file[0].size / 1024 / 1024 < 20
      if (!isLimitSize) {
        this.$message.error(this.$t('上传文件的大小不能大于20M!'))
      }
      return isLimitSize
    },
    handleAvatarSuccess(res, file) {
      this.fileList.push({
        fileUrl: res.name,
        fileName: res.realName,
        fileReviewUrl: res.previewUrl,
      })
      const fileList = this.fileList.map((it) => {
        return {
          fileUrl: it.fileUrl,
          fileName: it.fileName,
        }
      })
      this.getData();
    },
    handleAvatarError(err, file, fileList) {
      this.$message.error(err.msg)
    },
    deleteFile(index) {
      this.fileList.splice(index, 1)
      this.getData();
    },
    clickFile(item) {
      nonStandardService
        .fileAddressTranslation({ fileUrl: item.fileUrl })
        .then((res) => {
          if (res.code == 200) {
            window.open(res.data)
          }
        })
    },
    exceedData(files, fileList) {
      this.$message.warning(this.$t('上传文件数量不能超过10个'))
    },
    setData() {
      this.fileList = JSON.parse(this.value).value
        ? JSON.parse(this.value).value
        : []
    },
    getData() {
      let fileList = (this.fileList || []).map((it) => {
        return {
          fileUrl: it.fileUrl,
          fileName: it.fileName,
        }
      })
      let params = {
        value: fileList,
      }
      this.$emit('input', fileList.length ? JSON.stringify(params) : '');
      return params
    },
  },
}
</script>
<style lang="scss">
.el-upload-file {
  display: flex;
  justify-content: space-between;
  cursor: pointer;
  align-items: center;
}
</style>
